 <template>
  <div>
    <header>
      <div class="head">
        <img src="@/assets/right (1).png" alt="" @click="go()" />
        <span>重置密码</span>
      </div>
    </header>
    <main>
      <ul class="m-bottom">
        <li><input type="text" placeholder="账号" v-model="tex" /></li>
        <li><input type="text" placeholder="旧密码" v-model="oldpas" /></li>
        <li>
          <input type="password" placeholder="请输入新密码" v-model="newpas" />
        </li>
        <li>
          <input type="password" placeholder="请确认密码" v-model="affpas" />
        </li>
        <li>
          <input type="text" placeholder="验证码" v-model="code" /><img
            :src="imgurl"
            alt=""
            class="code"
          />
          <span class="hyh" @click="hyh()">换一换</span>
        </li>
      </ul>
      <div class="m-b" @click="change">
        <p>确认修改</p>
      </div>
    </main>
  </div>
</template>
 <script>
import { changepassword, getcode } from "@/api/index.js";
import Vue from "vue";
import { Dialog } from "vant";
Vue.use(Dialog);
export default {
  data() {
    return {
      tex: "",
      oldpas: "",
      newpas: "",
      affpas: "",
      code: "",
      imgurl: "",
    };
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    async change() {
      var h = /^1[3456789]\d{9}$/;
      if (h.test(this.tex) == false) {
        Dialog.alert({
          message: "请输入正确用户名",
        }).then(() => {
          // on close
        });
        return;
      }
      if (!this.oldpas) {
        Dialog.alert({
          message: "请输入旧密码",
        }).then(() => {
          // on close
        });
        return;
      }
      if (!this.newpas) {
        Dialog.alert({
          message: "请输入新密码",
        }).then(() => {
          // on close
        });
        return;
      }
      if (!this.affpas) {
        Dialog.alert({
          message: "请输入确认密码",
        }).then(() => {
          // on close
        });
        return;
      }
      if (!this.code) {
        Dialog.alert({
          message: "请输入验证码",
        }).then(() => {
          // on close
        });
        return;
      }
      var res = await changepassword({
        captcha_code: this.code,
        confirmpassword: this.affpas,
        newpassword: this.newpas,
        oldpassWord: this.oldpas,
        username: this.tex,
      });

      if (res.message) {
        Dialog.alert({
          message: res.message,
        }).then(() => {
          // on close
        });
      } else {
        Dialog.alert({
          message: "密码修改成功",
        }).then(() => {
          // on close
        });
      }
    },
    async hyh() {
      var im = await getcode();
      this.imgurl = im.data.code;
    },
  },
  async mounted() {
    var im = await getcode();
    this.imgurl = im.data.code;
  },
  computed: {},
};
</script>
 <style lang='css' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-style: normal;
}
input {
  outline: none;
}
header {
  width: 100%;
  height: 3rem;
  background: #3190e8;
  padding-left: 10px;
}
.head {
  width: 14rem;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head img {
  width: 1.5rem;
  height: 1.5rem;
}
.head span {
  color: #fff;
  font-weight: 700;
}
main {
  flex: 1;
  background: #f2f2f2;
  padding-top: 10px;
}
.m-bottom {
  width: 100%;
  height: 15rem;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.m-bottom li {
  width: 100%;
  height: 3rem;
  position: relative;
}
.m-bottom li input {
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 1px solid #ccc;
  padding-left: 10px;
}
.m-b {
  width: 100%;
  height: 3rem;
  margin-top: 30px;
  padding: 0px 10px;
}
.m-b p {
  width: 100%;
  height: 100%;
  background: #4cd964;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border-radius: 10px;
}
.code {
  position: absolute;
  right: 40px;
  bottom: 8px;
}
.hyh {
  position: absolute;
  right: 0px;
  top: 15px;
  font-size: 14px;
}
</style>